<template>
  <div class="viewContain">
    <!-- 图表信息 -->
    <div class="loadMessage" style="padding-bottom: 10px;">
      <el-row v-loading="pieLoading">
        <el-col :xs="{span:2}" :span="2">
          <h3 style="padding:18px 0 0 21px;font-weight:bold;color:rgba(0,0,0,1);">概況</h3>
        </el-col>
        <el-col class="charts" :xs="{span: 12}" :sm="{span: 12}" :md="{span: 6}" :lg="{span: 6}">
          <div v-if="!pieLoading" id="upSpeedChart">
            <pie-chart
              :color="['#158FC5', '#D2D2D2']"
              :chart-data="4 / 7"
              :title="45 + 'MB/S'"
              sub-title="上行负载"
            />
          </div>
        </el-col>
        <el-col class="charts" :xs="{span: 12}" :sm="{span: 12}" :md="{span: 6}" :lg="{span: 6}">
          <div v-if="!pieLoading" id="downSpeedChart">
            <pie-chart
              :color="['#00B17D', '#D2D2D2']"
              :chart-data="1 / 3"
              :title="60 + 'MB/S'"
              sub-title="下行负载"
            />
          </div>
        </el-col>
        <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 5,offset:1}" :lg="{span: 4}" style="padding-top: 20px;">
          <div id="LoadMessage-left">
            <p>上行路数 : <span style="color:#00B17D">{{ 12 }}</span></p>
            <p>上行流量 : <span style="color:#00B17D">{{ 23 }}GB</span></p>
            <p>负载均衡 : <span>在线</span></p>
            <p>转码服务 : <span style="color:#00B17D">{{ 34 }}</span></p>
            <p>流媒体服务 : <span style="color:#00B17D">{{ 43 }}</span></p>
          </div>
        </el-col>
        <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 5,offset: 1}" :lg="{span: 4}" style="padding-top: 20px;">
          <div id="LoadMessage-right">
            <p>下行路数 : <span style="color:#00B17D">{{ 21 }}</span></p>
            <p>下行流量 : <span style="color:#00B17D">{{ 12 }}GB</span></p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 负载路数统计/负载速率统计 -->
    <div class="loadControl" style="margin-top:10px">
      <el-row>
        <el-col class="loadControl-way" :xs="{span: 24}" :sm="{span: 24}" :lg="{span: 12}">
          <div v-loading="lineLoading">
            <line-chart
              v-if="!lineLoading"
              id="负载路数统计"
              width="100%"
              x-width="100%"
              :color="['#1496D0','#00B17D']"
              :show-area="false"
              :series="loadControlWaySeries"
              :x-axis="loadControlWayXAxis"
              :y-axis="loadControlWayYAix"
              :legend="loadControlWaygend"
            />
          </div>
        </el-col>
        <el-col class="loadControl-speed" :xs="{span: 24}" :sm="{span: 24}" :lg="{span: 11,offset:1}">
          <div v-loading="lineLoading">
            <line-chart
              v-if="!lineLoading"
              id="负载速率统计"
              width="100%"
              x-width="100%"
              :color="['#1496D0','#00B17D']"
              :show-area="false"
              :series="loadControlSpeedSeries"
              :x-axis="loadControlSpeedXAxis"
              :y-axis="loadControlSpeedYAix"
              :legend="loadControlSpeedlegend"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 终端设备/前端设备 -->
    <div class="device">
      <el-row>
        <el-col class="device-end" :xs="{span: 24}" :sm="{span: 24}" :lg="{span: 12}">
          <div v-loading="lineLoading">
            <line-chart
              v-if="!lineLoading"
              id="终端设备"
              width="100%"
              x-width="100%"
              :color="['#1496D0','#00B17D','#D02114','#EB6C0F','#232323']"
              :show-area="false"
              :series="deviceEndSeries"
              :x-axis="deviceEndXAxis"
              :y-axis="deviceEndYAix"
              :legend="deviceEndlegend"
            />
          </div>
        </el-col>
        <el-col class="device-font" :xs="{span: 24}" :sm="{span: 24}" :lg="{span: 11,offset:1}">
          <div v-loading="lineLoading">
            <line-chart
              v-if="!lineLoading"
              id="前端设备"
              width="100%"
              x-width="100%"
              :color="['#1496D0','#00B17D','#D02114','#EB6C0F']"
              :show-area="false"
              :series="deviceFontSeries"
              :x-axis="deviceFontXAxis"
              :y-axis="deviceFontYAix"
              :legend="deviceFontlegend"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import { getInitInfo, getHomeLbs, getLoad, getDeviceNum } from '@/api/mediaServer.js'
import pieChart from './chart/pieChart'
import lineChart from './chart/lineChart'
export default {
  name: 'Home',
  components: {
    pieChart,
    lineChart
  },
  data() {
    return {
      lineLoading: true,
      pieLoading: true,
      // 首页负载均衡服务器信息（饼图右侧信息）
      getLbsInfo: {},
      // 是否在线
      isOnline: '',
      //   ******************** 负载路数  ********************
      loadControlWayXAxis: {
        name: '',
        showSplitLine: true, // true || false 网格
        data: []
      },
      loadControlWayYAix: {
        name: '(路)',
        showSplitLine: true // true || false 网格
      },
      loadControlWaygend: {
        orient: 'vertical'
      },
      loadControlWaySeries: [{
        name: '上行',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: '#1496D0' }
      }, {
        name: '下行',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: '#00B17D' }
      }],
      //   ******************** 负载速率  ********************
      loadControlSpeedXAxis: {
        name: '',
        showSplitLine: true,
        data: []
      },
      loadControlSpeedYAix: {
        name: '(MB/S)',
        showSplitLine: true
      },
      loadControlSpeedlegend: {
        orient: 'vertical'
      },
      loadControlSpeedSeries: [{
        name: '上行',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: '#1496D0' }
      }, {
        name: '下行',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: '#00B17D' }
      }],
      //   ******************** 终端设备  ********************
      deviceEndXAxis: {
        name: '',
        showSplitLine: true,
        data: []
      },
      deviceEndYAix: {
        name: '(个)',
        showSplitLine: true
      },
      deviceEndlegend: {
        orient: 'vertical'
      },
      deviceEndSeries: [{
        name: '控制中心',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: 'none' }
      }, {
        name: '大屏',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: 'none' }
      }, {
        name: '安卓会议终端',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: 'none' }
      }, {
        name: 'PC会议终端',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: 'none' }
      }, {
        name: 'WEB',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: 'none' }
      }],
      //   ******************** 前端设备  ********************
      deviceFontXAxis: {
        name: '',
        showSplitLine: true,
        data: []
      },
      deviceFontYAix: {
        name: '(个)',
        showSplitLine: true
      },
      deviceFontlegend: {
        orient: 'vertical'
      },
      deviceFontSeries: [{
        name: '虚拟设备',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: 'none' }
      }, {
        name: '频道设备',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: 'none' }
      }, {
        name: '引用设备',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: 'none' }
      }, {
        name: '真实设备',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        areaStyle: { color: 'none' }
      }]
    }
  },
  mounted() {
    this.getServerList()
    // // 1.获取初始静态信息（两个饼图）
    // this.getStaticInfo()
    // // 2.获取首页负载均衡服务器信息（饼图右侧信息）
    // this.getLbsInfotest()
    // // 3.获取首页负载统计信息（负载路数&&负载速率）
    // this.getLoadInfo()
    // // 4.获取首页设备数量信息（终端设备&&前端设备）
    // this.getDeviceInfo()
    this.timer1 = setInterval(() => {
      this.loadControlWay()
    }, 1000)
    this.timer2 = setInterval(() => {
      this.loadControlSpeed()
    }, 1000)
    this.timer3 = setInterval(() => {
      this.deviceEnd()
    }, 1000)
    this.timer4 = setInterval(() => {
      this.deviceFont()
    }, 1000)
  },
  beforeDestroy() {
    this.clearTimer()
  },
  methods: {
    clearTimer() {
      if (this.timer1) {
        clearInterval(this.timer1)
      }
      if (this.timer2) {
        clearInterval(this.timer2)
      }
      if (this.timer3) {
        clearInterval(this.timer3)
      }
      if (this.timer4) {
        clearInterval(this.timer4)
      }
    },
    getServerList() {
      this.pieLoading = false
      this.lineLoading = false
    },
    // // 1.获取初始静态信息（两个饼图）
    // getStaticInfo() {
    //   getInitInfo().then(response => {
    //     if (response.code === 0) {
    //       console.log(111)
    //     }
    //   })
    // },
    // // 2.获取首页负载均衡服务器信息（饼图右侧信息） api失效
    // getLbsInfotest() {
    //   getHomeLbs().then(response => {
    //     if (response.code === 0) {
    //       this.getLbsInfo = response.status
    //       this.getLbsInfo.online === 1 ? this.isOnline = '在线' : this.isOnline = '离线'
    //       console.log(this.getLbsInfo)
    //     } else {
    //       this.$message({
    //         type: 'error',
    //         message: response.msg
    //       })
    //       this.clearTimer()
    //     }
    //   }).catch(error => {
    //     this.$message({
    //       type: 'error',
    //       message: error
    //     })
    //     this.clearTimer()
    //   })
    // },
    // // 3.获取首页负载统计信息（负载路数&&负载速率） api失效
    // getLoadInfo() {
    //   getLoad().then(response => {
    //     if (response.code === 0) {
    //       console.log(111)
    //     } else {
    //       this.$message({
    //         type: 'error',
    //         message: response.msg
    //       })
    //       this.clearTimer()
    //     }
    //   }).catch(error => {
    //     this.$message({
    //       type: 'error',
    //       message: error
    //     })
    //     this.clearTimer()
    //   })
    // },
    // // 4.获取首页设备数量信息（终端设备&&前端设备）
    // getDeviceInfo() {
    //   getDeviceNum().then(response => {
    //     if (response.code === 0) {
    //       console.log(response)
    //     } else {
    //       this.$message({
    //         type: 'error',
    //         message: response.msg
    //       })
    //       this.clearTimer()
    //     }
    //   }).catch(error => {
    //     this.$message({
    //       type: 'error',
    //       message: error
    //     })
    //     this.clearTimer()
    //   })
    // },
    loadControlWay() {
      if (this.loadControlWayXAxis.data.length >= 30) {
        this.loadControlWaySeries[0].data.shift()
        this.loadControlWaySeries[1].data.shift()
      }
      this.loadControlWayXAxis.data = [60, 30, 30, 30, 30, 50, 30, 30, 30, 30, 40, 30, 30, 30, 30, 30, 30, 30, 30, 30, 20, 30, 30, 30, 30, 10, 30, 30, 30, 0]
      this.loadControlWaySeries[0].data.push(5 + Math.floor(Math.random() * 10))
      this.loadControlWaySeries[1].data.push(20 + Math.floor(Math.random() * 10))
    },
    loadControlSpeed() {
      if (this.loadControlSpeedXAxis.data.length >= 30) {
        this.loadControlSpeedSeries[0].data.shift()
        this.loadControlSpeedSeries[1].data.shift()
      }
      this.loadControlSpeedXAxis.data = [60, 30, 30, 30, 30, 50, 30, 30, 30, 30, 40, 30, 30, 30, 30, 30, 30, 30, 30, 30, 20, 30, 30, 30, 30, 10, 30, 30, 30, 0]
      this.loadControlSpeedSeries[0].data.push(5 + Math.floor(Math.random() * 10))
      this.loadControlSpeedSeries[1].data.push(20 + Math.floor(Math.random() * 10))
    },
    deviceEnd() {
      if (this.deviceEndXAxis.data.length >= 30) {
        this.deviceEndSeries[0].data.shift()
        this.deviceEndSeries[1].data.shift()
        this.deviceEndSeries[2].data.shift()
        this.deviceEndSeries[3].data.shift()
        this.deviceEndSeries[4].data.shift()
      }
      this.deviceEndXAxis.data = [60, 30, 30, 30, 30, 50, 30, 30, 30, 30, 40, 30, 30, 30, 30, 30, 30, 30, 30, 30, 20, 30, 30, 30, 30, 10, 30, 30, 30, 0]
      this.deviceEndSeries[0].data.push(5 + Math.floor(Math.random() * 10))
      this.deviceEndSeries[1].data.push(15 + Math.floor(Math.random() * 10))
      this.deviceEndSeries[2].data.push(25 + Math.floor(Math.random() * 10))
      this.deviceEndSeries[3].data.push(35 + Math.floor(Math.random() * 10))
      this.deviceEndSeries[4].data.push(45 + Math.floor(Math.random() * 10))
    },
    deviceFont() {
      if (this.deviceFontXAxis.data.length >= 30) {
        this.deviceFontSeries[0].data.shift()
        this.deviceFontSeries[1].data.shift()
        this.deviceFontSeries[2].data.shift()
        this.deviceFontSeries[3].data.shift()
      }
      this.deviceFontXAxis.data = [60, 30, 30, 30, 30, 50, 30, 30, 30, 30, 40, 30, 30, 30, 30, 30, 30, 30, 30, 30, 20, 30, 30, 30, 30, 10, 30, 30, 30, 0]
      this.deviceFontSeries[0].data.push(5 + Math.floor(Math.random() * 10))
      this.deviceFontSeries[1].data.push(15 + Math.floor(Math.random() * 10))
      this.deviceFontSeries[2].data.push(25 + Math.floor(Math.random() * 10))
      this.deviceFontSeries[3].data.push(35 + Math.floor(Math.random() * 10))
    }
  }
}
</script>

<style lang="scss" scoped>
.viewContain {
    padding:20px;
}
.loadMessage {
    height: auto;
    border: 1px solid rgba(191, 191, 191, 1);
    border-radius: 12px;
    position: relative;
    .charts {
    padding: 0 21px;
    & div {
        // width: 25%;
        height: 195px;
        text-align: center;
    }
}
}
#LoadMessage-left,
#LoadMessage-right {
    font-size: 13px;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    line-height: 30px;
}
.loadControl .loadControl-way,
.loadControl .loadControl-speed,
.device .device-end,
.device .device-font {
    padding: 10px;
    height: 220px;
    margin-bottom: 10px;
    border: 1px solid rgba(191, 191, 191, 1);
    border-radius: 12px;
    // background: #ccc;
}
</style>

